export const addCaseCard = (editor) => {
  const { Components } = editor;

  // 此组件为案例卡片组件，双击图片可以更改图片，点击text可以修改说明文字
  // 需要横向排列可以设置样式的float为left或right
  Components.addType('CaseCard', {
    model: {
      defaults: {
        name: 'CaseCard',
        droppable: false,
        attributes: { class: 'case-card' },
        components: [
          {
            type: 'div',
            attributes: { class: 'case-card-wrapper' },
            components: [
              {
                type: 'image',
                // 当拖动图片时，会通过.case-card-image类来更改样式，
                // 但是没有设置class时，会使用随机生成的id来进行属性选择器修改宽高
                attributes: {
                  src: 'https://cdn4.codesign.qq.com/prototypes/2023/08/03/xDP3923q32qn08ZwlKp03/apgsmrtqzvfi3x3v/64200cfe52f6862c161ffd5c17463692.jpg',
                },
              },
              {
                type: 'text',
                attributes: { class: 'case-card-description' },
                content: '汇报动画 | 万科工程装配式建筑设计阶段技术认定汇报',
              },
            ],
          },
        ],
        script() {
          // const el = this;
          // const wrapperId = el.attributes.id.value;
          // const wrapperEl = document.getElementById(wrapperId);
          // const imgEl = wrapperEl.querySelector('img');
          // // 进行对image动态添加class类，这样组件的attributes就抓取不到此类名，
          // // 也就会使用随机生成的id来进行属性选择器修改宽高
          // // 但是在上传图片后，其样式会消失
          // if (imgEl) {
          //   imgEl.classList.add('case-card-image')
          //   // imgEl.setAttribute('style', 'max-width:100%;margin-bottom:10px');
          // }
        },
        styles: `
          .case-card-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #e9e9e9;
            padding: 10px;
            margin: 10px;
            width: 350px;
          }
          .case-card-wrapper img {
            max-width: 100%;
            margin-bottom: 10px;
          }
          .case-card-description {
            text-align: center;
          }
        `,
      },
    },
  });
};
